<template>
<view>
<view class="container">
  <!-- <view class='level_detail_title' wx:if="{{!memberState}}">
    <text class="levelName">{{myMembers.levelName}}</text>
    <view><text class="levelName">{{properties.alias_yue||'余额'}}：</text><text class='balance'>{{loginUser.platformUser.account}}</text></view>
  </view> -->
  <view class="my_level_detail">
    <view class="my_level_card" v-if="myMembers.cardBanner&&myMembers.cardBanner!='undefined'" :style="'background-image:url(' + myMembers.cardBanner + ')'"></view>
    <!-- style='{{myMembers.cardBanner&&myMembers.cardBanner!="undefined"?"background-image":"background"}}:{{myMembers.cardBanner&&myMembers.cardBanner!="undefined"?"url("+myMembers.cardBanner+")":myMembers.backgroundColor}}' -->
    <view class="my_level_card" v-else :style="'background:' + myMembers.backgroundColor">
      <view class="my_level_baseinfo">
        <image class="my_level_logo" :src="(myMembers.cardIcon?myMembers.cardIcon:'https://image1.sansancloud.com/xianhua/2018_12/21/17/44/1_472.jpg')"></image>
        <view class="my_level_name">
          <text class="my_level_platformname">{{loginUser.platformUser.belongMendianName}}</text>
          <text class="my_level_value">{{myMembers.levelName}}</text>
        </view>
      </view>
      <!-- <view class='my_level_limit_time'><text>有效期：</text><text wx:if="{{myMembers.limitType==1}}">永久有效</text></view> -->
      <view class="my_level_limit_time"><text v-if="loginUser.platformUser.platformUserCode">{{loginUser.platformUser.platformUserCode}}</text></view>
    </view>
    <view class="extra_info">
      <view class="extra_info_item" v-if="memberState" @click.stop="tolinkUrl" data-link="user_account_events.html">
      <!-- catchtap='tolinkUrl' data-link="mendian_zijin.html" -->
        <text class="extra_info_title">{{properties.alias_yue||'余额'}}</text>
        <text class="extra_info_value" :style="'color:' + platformSetting.defaultColor">￥{{loginUser.platformUser.account}}</text>
      </view>
      <view class="extra_info_item" v-else>
        <text class="extra_info_title">充值</text>
        <text class="extra_info_value" :style="'color:' + platformSetting.defaultColor">￥{{myMembers.needPayAmount}}</text>
      </view>
      <view class="extra_info_item">
        <text class="extra_info_title">等级</text>
        <text class="extra_info_value" :style="'color:' + platformSetting.defaultColor">{{myMembers.levelName}}</text>
      </view>
    </view>
  </view>
  <view class="level_description">
    <view class="level_description_item">
      <text class="level_description_name">会员说明</text>
      <text class="level_description_description">{{myMembers.limitDescription}}</text>
    </view>
    <view class="level_description_item">
      <text class="level_description_name">会员积分</text>
      <text class="level_description_description">{{loginUser.platformUser.jifen}}积分</text>
    </view>
    <view class="level_description_item">
      <text class="level_description_name">有限期限</text>
      <text class="level_description_description" v-if="myMembers.limitType==1">永久有效</text>
      <text class="level_description_description" v-else>{{myMembers.availableDayCount}}天</text>
    </view>
    <view class="level_description_item" style="justify-content: center;">
      <tkiBarcode cid="code128" :loadMake="false" :opations="opations" :onval="true" format="code128" :val="val" ref="code128" @result="code128" />
    </view>
  </view>
</view>
<view class="recharge_btn" :style="'background:' + platformSetting.defaultColor" :data-link="'user_recharge.html?money=' + myMembers.needPayAmount" @tap="tolinkUrl" v-if="rechargeState">
  <text>充值</text>
</view>
</view>
</template>

<script>
import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
// import newsPosters from "../../view/partials/canvas_news_detail/index";
// import componentTagCustompage from "../../view/partials/custom_page/index";

export default {
  components: {tkiBarcode},
  data() {
    return {
      memberState: false,
      rechargeState: false,
      membersList: "",
      myMembers: "",
      loginUser: "",
      platformSetting: "",
      properties: "",
      barCode:'',
      val: "",
      opations: {
          // format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
          width: 4,//设置条之间的宽度
          height: 120,//高度
          displayValue: true,//是否在条形码下方显示文字
          // text: "FB19A1650-100S",//覆盖显示的文本
          textAlign: "left",//设置文本的水平对齐方式
          textPosition: "bottom",//设置文本的垂直位置
          textMargin: 0,//设置条形码和文本之间的间距
          fontSize: 30,//设置文本的大小
          // fontColor: "#0000ef",//设置文本的颜色
          // lineColor: "#0000ef",//设置条形码的颜色
          background: "#FFFFFF",//设置条形码的背景色
          margin: 0,//设置条形码周围的空白边距
          // marginTop: 10,//设置条形码周围的上边距
          // marginBottom: 20,//设置条形码周围的下边距
          // marginLeft: 30,//设置条形码周围的左边距
          // marginRight: 40,//设置条形码周围的右边距
       }
    };
  },
options:"",
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    console.log('options', options);
    that.options=options
    if(getApp().globalData.loginUser&&getApp().globalData.loginUser.platformUser.platformUserCode){
        that.val=getApp().globalData.loginUser.platformUser.platformUserCode
    }
    setTimeout(() => {
    	that.$refs['code128']._makeCode()
    }, 1000);
    that.setData({
      loginUser: getApp().globalData.loginUser,
      platformSetting: getApp().globalData.setting.platformSetting,
      properties: getApp().globalData.properties
    });
    if(getApp().globalData.loginUser){
        that.barCode='https://mini.sansancloud.com/chainalliance/'+getApp().globalData.clientNo+"/bar_code.html?code="+getApp().globalData.loginUser.platformUser.platformUserCode
    }
    console.log('loginUser', getApp().globalData.loginUser);
    that.getMembersListData(that.options.id || 0);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
      let that=this;
      that.setData({
        loginUser: getApp().globalData.loginUser,
        platformSetting: getApp().globalData.setting.platformSetting,
        properties: getApp().globalData.properties
      });
      that.getMembersListData(that.options.id || 0);
      wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    code128(v) {
        console.log('code128:', v)
     },
    tolinkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link;
      getApp().globalData.linkEvent(linkUrl);
    },
    getMembersListData: function (id) {
      let that = this;
      let customIndex = getApp().globalData.AddClientUrl("/wx_find_user_levels.html");
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log('====getUserCardPackage-res===', res);

          if (res.data.errcode == 0) {
            let data = res.data.relateObj;
            that.setData({
              membersList: res.data.relateObj
            });

            for (let i = 0; i < data.length; i++) {
              if (that.loginUser && data[i].levelValue == that.loginUser.platformUser.userLevel && id == data[i].id) {
                console.log("点击当前的是自己的会员");
                that.setData({
                  memberState: true
                });
              }
            }

            for (let i = 0; i < data.length; i++) {
              console.log("当前点击");

              if (data[i].id == id) {
                that.setData({
                  myMembers: data[i]
                });

                if (that.loginUser && Number(data[i].levelValue) >= Number(that.loginUser.platformUser.userLevel)) {
                  console.log("可充值");
                  that.setData({
                    rechargeState: true
                  });
                } else {
                  console.log("不可充值");
                  that.setData({
                    rechargeState: false
                  });
                }
              }
            }
          } else {
            wx.showModal({
              title: '提示',
              content: '主人~请求超时！确认重新加载',
              success: function (res) {
                if (res.confirm) {
                  that.getUserCardPackage();
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });
          }

          console.log('===membersList===', that.membersList);
          console.log('===myMembers===', that.myMembers);
        },
        complete: function (res) {}
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>